<template>
  <div>
    <el-descriptions class="margin-top" :column="1" border v-if="item">
      <template slot="extra"> </template>
      <el-descriptions-item labelClassName="custom-label">
        <template slot="label"> IP </template>
        {{ item.targetIp }}
      </el-descriptions-item>
      <el-descriptions-item labelClassName="custom-label">
        <template slot="label"> 关联类型 </template>
        <span
          v-for="dict in dict.type.atlas_task_type"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
          ><span v-if="dict.value == item.type">{{ dict.label }}</span></span
        >
      </el-descriptions-item>
      <el-descriptions-item labelClassName="custom-label">
        <template slot="label"> 预测风险前组织 </template>
        {{ item.beforeRiskOrg }}
      </el-descriptions-item>
      <el-descriptions-item labelClassName="custom-label">
        <template slot="label"> 预测风险后组织 </template>
        {{ item.afterRiskOrg }}
      </el-descriptions-item>
      <el-descriptions-item labelClassName="custom-label">
        <template slot="label"> 当前状态 </template>
        <span
          v-for="dict in dict.type.atlas_task_status"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
          ><span v-if="dict.value == item.taskStatus">{{
            dict.label
          }}</span></span
        >
      </el-descriptions-item>
      <el-descriptions-item labelClassName="custom-label">
        <template slot="label"> 开始时间 </template>
        {{ item.startTime }}
      </el-descriptions-item>
      <el-descriptions-item labelClassName="custom-label">
        <template slot="label"> 结束时间 </template>
        {{ item.endTime }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { selectCombatAtlasTaskById } from "@/api/IPOwnershipProtection/dataStatistics.js";
export default {
  dicts: ["atlas_task_status", "atlas_task_type"],
  data() {
    return {
      item: null,
    };
  },
  mounted() {
    var id = this.$route.query.id;
    selectCombatAtlasTaskById(id).then((res) => {
      this.item = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
::v-deep .custom-label {
  width: 120px !important; /* 设置为你需要的宽度 */
}
</style>